<template>
  <div class="slider-bar">
    <div v-if="title" style="text-align: right;margin-right: 5px;" :style="{width:titleWidth}">{{title}}</div>
    <a-slider class="slider" v-model:value="inputValue" :min="min" :max="max" :step="step" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: "slider-bar",
  props:{
    title:{
      type: String,
      default: '',
    },
    titleWidth:{
      type: String,
      default: '3em',
    },
    value: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 100,
    },
    step: {
      type: Number,
      default: 1,
    }
  },
  computed:{
    inputValue:{
      get(){
        return this.value;
      },
      set(val){
        this.$emit("update:value",val)
        this.$emit("change",val)
      }
    }
  },
  methods:{
  }
});
</script>

<style lang="less">
.slider-bar {
  display: flex;
  align-items: center;
  width: 100%;

  .slider{
    box-sizing: border-box;
    flex-grow: 1;
  }
}
</style>
